<template>
	<view class="">
		<view v-if="pet_team.teamId && pet_team.teamId != '-1'" class="" style="width: 100%;">
			<cu-custom :bgColor="'var(--primaryBg)'">
				<view slot="content" :style="scrollTop>CustomBar?'color:#fff':''" class="title">
					宠物
				</view>
			</cu-custom>
			<view class="box">
				<view class="head">
					<view @click="handleTab(index)" v-for="(item,index) in tabList" :key="index" class="head-item"
						:class="tabIndex==index?'active':''">
						{{item.name}}
					</view>
				</view>
				<view class="content">
					<view class="search">
						<view class="search-input">
							<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/search.png" mode=""></image>
							<input @confirm="init" confirm-type="search" v-model="params.name" type="text"
								placeholder="搜索宠物" placeholder-style="color:#AAAAAA;" />
						</view>
						<view @click="toPage1(`/pagesPet/pages/pet/bindingPet/index`)" class="search-bind">
							<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/bangding.png" mode=""></image>
							<view class="">绑定宠主</view>
						</view>
					</view>
					<view class="list">
						<view v-if="remindNum" @click="handleRemindDetail" class="remind">
							<image class="remind-icon" src="https://ballon-vdigit.oss-cn-qingdao.aliyuncs.com/20250228/202502281555406174.png" mode=""></image>
							<view class="">
								提醒：{{remindNum}}
							</view>
							<image class="remind-to" src="https://ballon-vdigit.oss-cn-qingdao.aliyuncs.com/20250228/202502281557525886.png" mode=""></image>
						</view>
						<view class="item" v-for="(item,index) in list" :key="index">
							<view class="item-head">
								<view class="item-img">
									<image :src="item.picture" mode="aspectFill"></image>
								</view>
								<view class="item-detail">
									<view class="item-name ">
										<view class="name text-cut">{{item.name}}</view>
										<view class="gender">
											<image :src="item.sex == 'Male'? man : woman" mode=""></image>
										</view>
										<view class="item-id">
											ID:{{item.cargoNo}}
										</view>
									</view>
									<view class="item-age">
										<view class="">{{item.age || '--'}}</view>
										<view class="">{{item.type2Str || '--'}}</view>
									</view>
									<view class="item-introduce text-cut2" v-if="item.remark">
										{{item.remark || '--'}}
									</view>
									<view class="item-money">
										￥
										<view class="">
											800
										</view>
									</view>
								</view>
							</view>
							<view class="item-bottom">
								<!-- 未绑定 -->
								<view class="bottom-item" v-if="!item.bindNickname && !item.bindPhone">
									<image src="https://ballon-vdigit.oss-cn-qingdao.aliyuncs.com/20250228/202502281454137011.png" mode=""></image>
									<view class="">
										添加时间：{{item.createTime || '--'}}
									</view>
								</view>
								<!-- 绑定 -->
								<view class="bottom-item" v-if="item.bindStatus == 'BINDED' ">
									<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/zhu.png" mode=""></image>
									<view class="">
										宠主：{{item.bindNickname || '--'}}
									</view>
								</view>
								<view class="bottom-item" v-if="item.bindPhone">
									<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/lianxi.png" mode="">
									</image>
									<view class="">
										联系电话：{{item.bindPhone || '--'}}
									</view>
								</view>
								<view class="btn">
									<view v-if="item.bindStatus == 'BINDED'" @click="handleRemind(item)" class="">提醒设置</view>
									<view v-if="item.bindStatus == 'BINDED'" @click="handleCancelPet(item)" class="">取消绑定</view>
									<view @click="toPage(`/pagesPet/pages/pet/files/index?id=` +item.id)" class="">档案管理</view>
									<view @click="toPage(`/pagesPet/pages/pet/addPet/index?id=${item.id}`)" class="">编辑宠物</view>
									<view v-if="item.bindStatus == 'UNBIND'"
										@click="toPage(`/pagesPet/pages/pet/bindingPet/index?id=${item.id}`)" class=""
										style="background: var(--primaryBg);">绑定宠物</view>
								</view>
							</view>
						</view>

						<view class="" style="margin-top: 50rpx;">
							<data-null v-if="!list.length"></data-null>
						</view>
					</view>

					<view class="none" v-if="!(total > params.page * params.limit) && list.length && params.page != 1">
						没有更多了～
					</view>
				</view>
				<view @click="toPage(`/pagesPet/pages/pet/addPet/index`)" class="add">
					<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202412181419447233.png" mode="">
					</image>
					<view class="">添加宠物</view>
				</view>

				<view class="" style="height: 300rpx;">

				</view>

			</view>
		</view>
		<view v-else>
			<cu-custom :bgColor="'var(--primaryBg)'">
				<view slot="content" :style="scrollTop>CustomBar?'color:#fff':''" class="title">
					宠物
				</view>
			</cu-custom>
			<noMerchant ref="noMerchant" :petTeam="pet_team"></noMerchant>
		</view>
		<showModal1 ref="showModal1"></showModal1>
		<loginModal ref="loginModal"></loginModal>
		<remindAdd ref="remindAdd"></remindAdd>
		<remindDetail ref="remindDetail"></remindDetail>
	</view>
</template>

<script>
	// b端新增提醒
	import remindAdd from "@/components/remindPet/sale-add.vue"
	// b端提醒列表
	import remindDetail from "@/components/remindPet/sale-detail.vue"
	import showModal1 from "@/components/show-modal1.vue"
	import noMerchant from "@/components/noMerchant"
	import util from '@/common/util'
	import {
		getCargoPage,
		unbindCargo
	} from "@/api/pet/index/saler"
	import {
		getCargoList,
	} from "@/api/pet/binding/index"
	import {
		listTeamrole,
	} from '@/api/team/index'
	
	import {addRemind,getRemindNum} from "@/api/pet/remind/saler.js"
	export default {
		components: {
			showModal1,
			noMerchant,
			remindAdd,
			remindDetail
		},
		data() {
			return {
				man: 'https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202412181602393331.png',
				woman: 'https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202412181602585604.png',
				scrollTop: 0,
				CustomBar: this.CustomBar,
				tabIndex: 0,
				tabList: [{
					name: '全部',
					type: ""
				}, {
					name: '已绑定',
					bindStatus: "BINDED"
				}, {
					name: '未绑定',
					bindStatus: "UNBIND"
				}],
				params: {
					page: 1,
					limit: 10,
					name: ''
				},
				list: [],
				total: 0,
				item: {},
				pet_team: {},
				typeList: [],
				remindNum:0,
			}
		},
		onLoad() {
			this.init()
		},
		onPullDownRefresh() {
			if(this.total>this.list.length){
				this.params.page++
				this.getList()
			}
		},
		onReachBottom() {
			if(this.tabValue == 2){
				this.$refs.deviceList.reachBottom()
			}
		},
		methods: {
			handleRemindDetail(){
				this.$refs.remindDetail.handleOpen({
					title:'我的提醒',
					type:'SALER',
					success:(data)=>{
						
					}
				})
			},
			getRemindNum(){
				getRemindNum({teamId:this.pet_team.teamId}).then(res=>{
					this.remindNum = res
				})
			},
			handleRemind(item){
				this.$refs.remindAdd.handleOpen({
					item:item,
					success:(data)=>{
						data.map(dataItem=>{
							dataItem.cargoName = item.name
							dataItem.cargoNo = item.cargoNo
							dataItem.time = dataItem.time+':00'
							dataItem.cargoId = item.id
							dataItem.bindUserId = item.bindUserId
						})
						addRemind(data).then(res=>{
							uni.showToast({
								title:'操作成功',
								icon:'none'
							})
							setTimeout(()=>{
								this.init()
							},500)
						})
					}
				})
			},
			getCargoList() {
				var teamInfo = uni.getStorageSync('pet_team')
				getCargoList({
					teamId: teamInfo.teamId,
					bindStatus: "UNBIND"
				}).then(res => {
					this.typeList = res || []
				})
			},
			getPetTeam() {
				this.pet_team = uni.getStorageSync('pet_team')
				if (this.pet_team && this.pet_team.teamId != '-1') {
					this.params.teamId = this.pet_team.teamId
				}
				uni.stopPullDownRefresh()
			},
			handleTab(index) {
				this.tabIndex = index
				this.init()
			},
			regMerchant() {
				//if (!util.isLogin()) return;
				listTeamrole({
					svrType: 'CARGO',
					status: 'PASS'
				}).then(e => {
					let item = e?.find(item => item.teamType == 'E')
					if (item) {
						uni.setStorageSync('pet_team', {
							teamId: item.teamId,
							teamName: item.teamName,
							applyStatus: item.applyStatus
						})
					} else {
						let userItem = e[0]
						uni.setStorageSync('pet_team', {
							teamId: '-1',
							teamName: '个人',
							applyStatus: userItem.applyStatus, //是否有申请过服务商
							cargoTeamId: userItem.cargoTeamId, // 再次申请服务商要上传的id
							cargoTeamStatus: userItem.cargoTeamStatus, //后台审核状态
						})
					}
					this.init()
				})
			},
			init() {
				this.getPetTeam()
				this.getCargoList()
				this.params.page = 1
				this.list = []
				this.getRemindNum()
				this.getList()
			},
			onScroll(e) {
				this.scrollTop = e.scrollTop
			},
			reachBottom() {
				if (this.total > this.params.page * this.params.limit) {
					this.params.page++
					this.getList()
				}
			},
			getList() {
				if (!this.pet_team || this.pet_team.teamId == '-1') {
					return
				}
				getCargoPage({
					...this.params,
					teamId: this.pet_team.teamId,
					bindStatus: this.tabList[this.tabIndex].bindStatus
				}).then(res => {
					uni.stopPullDownRefresh()
					this.list = res.rows || []
					this.total = res.total
				})
			},
			toPage1(url) {
				if (!this.list.length) {
					uni.showToast({
						title: "请先添加宠物再绑定",
						icon: "none"
					})
					return
				}
				if (!this.typeList.length) {
					uni.showToast({
						title: "暂无可绑定的宠物，请先添加宠物再绑定",
						icon: "none",
						duration: 3000
					})
					return
				}
				uni.navigateTo({
					url
				})
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			handleCancelPet(item) {
				this.$refs.showModal1.open({
					content: '确认取消绑定吗',
					success: () => {
						unbindCargo({
							id: item.id,
							teamId: this.pet_team.teamId,
						}).then(res => {
							uni.showToast({
								title: "解绑成功"
							})
							this.init()
						})
					}
				})
			},
		},
	}
</script>
<style>

</style>
<style scoped lang="scss">
	.remind{
		width: 718rpx;
		height: 80rpx;
		background: #FEF6E5;
		border-radius: 16rpx;
		border: 1rpx solid rgba(255,255,255,0.6);
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		margin: 20rpx auto 0;
		.remind-icon{
			width: 36rpx;
			height: 36rpx;
			margin-right: 12rpx;
		}
		view{
			flex: 1;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #222222;
			line-height: 37rpx;
		}
		.remind-to{
			width: 30rpx;
			height: 30rpx;
			margin-left: 20rpx;
		}
	}
	.box {
		width: 100%;
		display: flex;
		flex-direction: column;

		.head {
			width: 100%;
			padding: 12rpx 0 58rpx;
			display: flex;
			background: var(--primaryBg);

			.head-item {
				width: 33.33%;
				position: relative;
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #665C29;
				line-height: 40rpx;
			}

			.active {
				font-weight: 600;
				color: var(--h1Color);

				&::after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: -8rpx;
					transform: translateX(-50%);
					width: 32rpx;
					height: 4rpx;
					background: var(--h1Color);
					border-radius: 3rpx;
				}
			}
		}

		.content {
			flex: 1;
			position: relative;
			width: 100%;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			box-sizing: border-box;
			top: -28rpx;

			.search {
				width: 100%;
				height: 108rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #fff;
				border-radius: 32rpx 32rpx 0rpx 0rpx;
				padding: 0 24rpx;
				box-sizing: border-box;

				.search-input {
					width: 598rpx;
					height: 76rpx;
					background: #F8F8F8;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					padding: 0 16rpx;
					box-sizing: border-box;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 8rpx;
					}

					input {
						flex: 1;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						line-height: 40rpx;
					}
				}

				.search-bind {
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
					}

					view {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: var(--h1Color);
						line-height: 28rpx;
					}
				}
			}

			.list {
				width: 100%;
				padding: 0 16rpx;
				box-sizing: border-box;

				.item {
					width: 100%;
					padding: 20rpx;
					box-sizing: border-box;
					background: #fff;
					margin-bottom: 20rpx;

					.item-head {
						display: flex;
						flex-direction: row;

						.item-img {
							width: 200rpx;
							height: 200rpx;
							border-radius: 16rpx;
							background: var(--primaryBg);
							overflow: hidden;
							margin-right: 24rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.item-detail {
							flex: 1;
							overflow: hidden;
							padding-top: 8rpx;
							.item-name {
								display: flex;
								align-items: center;
								margin-bottom: 10rpx;

								.name {
									font-family: PingFangSC, PingFang SC;
									font-weight: 600;
									font-size: 36rpx;
									color: var(--h1Color);
									line-height: 50rpx;
									flex: 1;
								}

								.gender {
									width: 36rpx;
									height: 36rpx;
									margin:0 12rpx;

									image {
										width: 100%;
										height: 100%;
									}
								}
								.item-id{
									padding: 0 12rpx;
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									font-size: 22rpx;
									color: #222222;
									line-height: 36rpx;
									background: #FFF6CD;
									border-radius: 29rpx;
									width: max-content;
								}
							}

							.item-age {
								display: flex;
								align-items: center;
								margin-bottom: 18rpx;
								// padding: 6rpx 0;

								view {
									font-family: PingFangSC, PingFang SC;
									font-weight: 500;
									font-size: 26rpx;
									color: var(--h2Color);
									line-height: 1;

									&:last-child {
										padding-left: 10rpx;
										border-left: 1rpx solid #DDDDDD;
										margin-left: 10rpx;
									}
								}

							}

							.item-introduce {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 26rpx;
								color: var(--h4Color);
								line-height: 37rpx;
								text-align: justify;
							}
							.item-money{
								margin-top: 8rpx;
								display: inline-block;
								font-family: PingFangSC, PingFang SC;
								font-weight: 600;
								font-size: 24rpx;
								color: #F34629;
								line-height: 33rpx;
								view{
									display: inline-block;
									font-size: 32rpx;
								}
							}
						}
					}

					.item-bottom {
						width: 100%;
						border-top: 1rpx dashed #E5E5E5;
						margin-top: 32rpx;
						padding-top: 23rpx;

						.bottom-item {
							display: flex;
							align-items: center;
							margin-bottom: 16rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: var(--h1Color);
							line-height: 37rpx;

							&:last-child {
								margin-bottom: 0;
							}

							image {
								width: 26rpx;
								height: 26rpx;
								margin-right: 12rpx;
							}

							view {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 26rpx;
								color: var(--h1Color);
								line-height: 37rpx;
							}
						}

						.btn {
							display: flex;
							align-items: center;
							justify-content: flex-end;
							margin-top: 40rpx;

							view {
								width: 168rpx;
								background: #FAFAFA;
								border-radius: 12rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 26rpx;
								color: var(--btnColor);
								line-height: 70rpx;
								text-align: center;
								margin-left: 12rpx;
							}
						}
					}
				}
			}

			.none {
				width: 100%;
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: var(--h4Color);
				line-height: 33rpx;
				margin-top: 40rpx;
			}
		}

		.add {
			position: fixed;
			left: 50%;
			bottom: 160rpx;
			transform: translateX(-50%);
			width: 202rpx;
			height: 80rpx;
			background: var(--primaryBg);
			box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
			border-radius: 40rpx;
			border: 4rpx solid #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 12rpx;
			}

			view {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: var(--btnColor);
				line-height: 40rpx;
			}
		}
	}
</style>